<script setup>
import { reactive, defineEmits } from "vue";
import { useApi } from "@/composables/useApi.js";
import showToast from "@/components/toast/index.js";
import { getGradeListAll } from "@/api/standard.js";

const props = defineProps({
  title: {
    type: String,
    required: true,
  },
  buttonText: {
    type: String,
    required: true,
  },
  displayFlag: {
    type: Boolean,
    default: false,
  },
  gradeId: {
    type: Number,
    default: null,
  },
});
let emit = defineEmits(["onChange", "onHandle", "changeId"]);

watch(
  () => props.gradeId,
  (val) => {
    if (val != null) {
      form.value.gradeId = val;
      getClassList(val);
    }
  }
);
const inputValue = ref("");
const form = reactive({
  // eslint-disable-next-line camelcase
  student_id: "",
  student_name: "",
  grade_id: null,
  class_id: null,
});
let sexList = ref(["男", "女"]);
const inputTypeStatus = ref(false); //自定义下拉框是展示开始隐藏
const inputType = ref(1); //输入框筛选  1姓名  2ID
const inputTypeSelect = reactive([
  { value: 1, label: "姓名" },
  { value: 2, label: "ID" },
]);

//判断下拉框是显示还是隐藏
const handleVisibleChange = (e) => {
  inputTypeStatus.value = !inputTypeStatus.value;
};
// 删除回调
const onHandle = (type) => {
  emit("onHandle", type);
};
const search = () => {
  let inputValue = form.inputValue;
  if (inputType.value == 1) {
    form.student_name = inputValue;
    form.student_id = "";
  } else {
    form.student_name = "";
    form.student_id = inputValue;
  }
  showFlag.value = false;
  emit("onChange", form);
  findGrade();
  findClass();
};
const reset = () => {
  form.grade_id = null;
  form.class_id = null;
  emit("onChange", form);
};
const showFlag = ref(false);

/** 场次列表*/
const sessionList = ref([]);
const sessionValue = ref();

const getSessionList = async () => {
  const { data } = await useApi("/admin/Api.Examcourse/index").post({
    page: 1,
    limit: 99999,
    type: 1,
  });
  sessionList.value = data.value.data.data.map((item) => {
    return {
      ...item,
      id: item.examcourse_id,
    };
  });
  console.log(sessionValue.value)
  sessionValue.value = sessionList.value[0].examcourse_id;
  emit("changeId", sessionValue.value);
};
getSessionList();
/** 获取场次列表结束*/

/** 场次下拉框切换或掉*/
const changeId = (val) => {
  console.log(val);
  sessionValue.value = val;
  emit("changeId", sessionValue.value);
};
/** 获取年级列表开始*/
const gradeList = ref([]);
getGradeListAll().then((res) => {
  gradeList.value = res.data;
});
/** 获取年级列表结束*/
/** 获取班级列表开始*/
const classList = ref([]);
const getClassList = async (id = "") => {
  console.log(id, "id");
  console.log(form.grade_id);
  const { data } = await useApi("/admin/Api.GradeClass/indexList").post({
    grade_id: id,
  });
  if (data.value.status == 200) {
    console.log("syz", data.value.data);
    classList.value = data.value.data;
  }
};
/** 获取班级列表结束*/
const gradeChange = (id) => {
  console.log(id);
  if (id != form.grade_id) {
    form.class_id = null;
  }

  getClassList(id);
};

const changeShowFlag = () => {
  showFlag.value = !showFlag.value;
  console.log(showFlag.value);
};
const currentGrade = ref("");
const currentClass = ref("");
const findGrade = () => {
  gradeList.value.forEach((item) => {
    if (item.grade_id == form.grade_id) {
      currentGrade.value = item.title;
    }
  });
};
const findClass = () => {
  classList.value.forEach((item) => {
    if (item.class_id == form.class_id) {
      currentClass.value = item.title;
    }
  });
};
</script>

<template>
  <div style="position: relative">
    <v-list class="header_box">
      <div class="head">
        <div class="heads">
          <div class="head_title">
            {{ props.title }}
          </div>
          <div class="search">
            <div style="position: relative">
              <div class="select">
                {{ inputType == 1 ? "姓名" : "ID" }}
                <i
                  v-if="inputTypeStatus"
                  class="ri-arrow-up-s-line"
                  style="
                    block-size: 16px;
                    inline-size: 16px;
                    margin-inline-start: 5px;
                  "
                />
                <i
                  v-if="!inputTypeStatus"
                  class="ri-arrow-down-s-line"
                  style="
                    block-size: 16px;
                    inline-size: 16px;
                    margin-inline-start: 5px;
                  "
                />
              </div>
              <VSelect
                v-model="inputType"
                :items="inputTypeSelect"
                item-title="label"
                item-value="value"
                label="Standard"
                placeholder="Select Item"
                style="
                  position: absolute;
                  inset-block-start: 0;
                  inset-inline-start: 0;
                  opacity: 0;
                "
                eager
                @click="handleVisibleChange"
              />
            </div>
            <VTextField
              v-model="form.inputValue"
              single-line
              placeholder="搜索"
              variant="plain"
              max-width="180px"
              style="
                block-size: 27px;
                margin-block-start: -36px;
                margin-inline-start: 10px;
              "
            />

            <i
              @click="search"
              class="ri-search-line cursor-pointer"
              style="
                block-size: 18px;
                inline-size: 18px;
                margin-inline-start: auto;
              "
            />
          </div>
          <div class="select-btn" v-if="!displayFlag">
            <el-select
              class="ml-6"
              @change="changeId"
              v-model="sessionValue"
              clearable
              popper-class="mySelectStyle"
              filterable
              style="width: 240px"
              :teleported="false"
            >
              <el-option
                v-for="item in sessionList"
                :key="item.examcourse_id"
                :label="item.title"
                :value="item.examcourse_id"
              />
            </el-select>
          </div>
          <div
            v-if="!displayFlag"
            @click="onHandle('openSecondPage')"
            class="examination-session border-radius-md"
          >
            考试场次管理
          </div>
          <div class="right">
            <div class="Condition" v-if="form.grade_id">
              <span>{{ currentGrade }} </span>
              <i
                class="ri-close-circle-fill"
                style="
                  block-size: 20px;
                  inline-size: 20px;
                  margin-inline-start: 5px;
                "
                @click="
                  () => {
                    form.grade_id = null;
                    search()
                  }
                "
              ></i>
            </div>
            <div class="Condition" v-if="form.class_id">
              <span>{{ currentClass }}</span>
              <i
                class="ri-close-circle-fill"
                style="
                  block-size: 20px;
                  inline-size: 20px;
                  margin-inline-start: 5px;
                "
                @click="
                  () => {
                    form.class_id = null;
                    search()
                  }
                "
              ></i>
            </div>
            <IconBtn size="small" style="position: relative">
              <i
                class="ri-filter-3-line cursor-pointer"
                style="block-size: 24px; inline-size: 24px"
                @click="changeShowFlag"
              />
            </IconBtn>
            <i
              v-if="!displayFlag"
              class="ri-delete-bin-5-line cursor-pointer"
              style="
                block-size: 24px;
                inline-size: 24px;
                margin-inline-start: 24px;
              "
              @click="onHandle('delete')"
            />
            <VBtn
              v-if="!displayFlag"
              color="primary"
              style="margin-inline-start: 24px"
              @click="onHandle('add')"
            >
              {{ buttonText }}
            </VBtn>
          </div>
        </div>
      </div>
    </v-list>
    <div class="menu-box" v-if="showFlag">
      <VList style="width: 310px !important">
        <VListItem v-if="props.gradeId === null || props.gradeId === -1">
          <template #prepend>
            <VSelect
              :items="gradeList"
              @update:modelValue="gradeChange"
              v-model="form.grade_id"
              item-title="title"
              item-value="grade_id"
              label="年级"
              class="input-width-height"
            />
          </template>
        </VListItem>
        <VListItem>
          <template #prepend>
            <VSelect
              v-model="form.class_id"
              :disabled="form.grade_id === ''"
              :items="classList"
              item-title="title"
              item-value="class_id"
              label="班级"
              class="input-width-height"
            />
          </template>
        </VListItem>
        <VListItem style="display: flex; justify-content: end">
          <VBtn color="primary" class="me-4" @click="search"> 搜索 </VBtn>
          <VBtn type="submit" color="primary" @click="reset"> 重置 </VBtn>
        </VListItem>
      </VList>
    </div>
  </div>
</template>

<style lang="scss" scoped>
@use "@configured-variables" as variables;

:deep(.select-btn) {
  .el-select__wrapper {
    background-color: rgb(var(--v-theme-background));
    height: 39px;
    border: none;
    box-shadow: unset;
  }
}

//下拉框背景色
.el-popper.is-light.mySelectStyle {
  background-color: rgba(0, 136, 255, 0.1) !important;
  border: 1px solid #254277 !important;
}
//下拉框的链接小方块
.mySelectStyle.el-popper[data-popper-placement^="bottom"]
  .el-popper__arrow::before {
  border: 1px solid #254277 !important;
}
.mySelectStyle.el-popper[data-popper-placement^="top"]
  .el-popper__arrow::before {
  background: #254277 !important;
  border: 1px solid #254277 !important;
}
//鼠标移动上去的选中色
.mySelectStyle {
  .el-select-dropdown__item.hover,
  .el-select-dropdown__item:hover {
    //background: #ece4ff !important;
  }

  //下拉框的文本颜色
  .el-select-dropdown__item {
    //color:var(--v-secondary) !important;
  }

  //选中之后的颜色
  .el-select-dropdown__item.selected {
    //background: #ece4ff !important;
  }
}
.menu-box {
  border-radius: 6px;
  position: absolute;
  top: 43px;
  right: -25px;
  width: 310px;
  background-color: #fff;
  z-index: 999;
}

.input-width-height {
  width: 280px !important;
}

.v-picker-title {
  display: none !important;
}

.examination-session {
  margin-left: 30px;
  cursor: pointer;
  width: 120px;
  height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  color: rgba(var(--v-theme-grey-100));
  background: rgba(var(--v-theme-button-grey-bg));
}

.right {
  display: flex;
  align-items: center;
  margin-inline-start: auto;
  .Condition {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 24px;
    padding: 2px 6px 2px 6px;
    text-align: center;
    line-height: 20px;
    border-radius: 10px;
    background-color: rgba(46, 38, 61, 0.08);
    font-size: 14px;
    margin-right: 20px;
  }
}

.select {
  z-index: 1;
  display: flex;
  align-items: center;
  color: #151619;
  cursor: pointer;
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: 22px; /* 157.143% */
  color: rgba(
    var(--v-theme-on-surface),
    var(--v-high-emphasis-opacity)
  ) !important;
}

.head {
  inline-size: 100%;
  padding-block: 12px;

  .heads {
    display: flex;
    align-items: center;
    inline-size: calc(100% - 48px);
    margin-block: 0;
    margin-left: 20px;

    .head_title {
      //color: #423b50;
      font-feature-settings: "ss01" on, "ss04" on;
      font-size: 20px;
      font-style: normal;
      font-variant-numeric: lining-nums tabular-nums;
      font-weight: 500;
      line-height: 140%; /* 28px */
    }

    .search {
      display: flex;
      align-items: center;
      border-radius: 74px;
      inline-size: 291px;
      margin-inline-start: 40px;
      padding-block: 8px;
      padding-inline: 16px;
      background-color: variables.$vertical-nav-background-color;
    }
  }
}

.header_box {
  padding: 0px;
  overflow: visible;
}
::v-deep(.el-select__wrapper),
::v-deep(.el-select-dropdown){
  background-color: rgb(var(--v-theme-surface));
}

::v-deep(.el-popper.is-light .el-popper__arrow::before) {
  background-color: rgb(var(--v-theme-surface));
}

::v-deep(.el-select__wrapper){
  background-color: rgb(var(--v-theme-surface));
}
::v-deep(.el-select-dropdown__item){
  color: rgb(140, 87, 255);
}
</style>
